import Vue from 'vue';
import Router from 'vue-router';
import Layout from '@/layout';

Vue.use(Router);

// const rules = ['admin', 'editor', 'viewer'];

export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index'),
      },
    ],
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true,
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true,
  },
  {
    path: '/401',
    component: () => import('@/views/error-page/401'),
    hidden: true,
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: '控制台', icon: 'dashboard', affix: true },
      },
    ],
  },
];

/**
 * asyncRoutes
 * 基于用户角色动态加载路由
 */
export const asyncRoutes = [
  {
    path: '/permission1',
    component: Layout,
    name: 'Permission1',
    hidden: false,
    alwaysShow: true, // will always show the root menu
    meta: {
      id: 'permission1',
      title: '管理员',
      icon: 'lock',
      // roles: [rules[0]] // you can set roles in root nav
    },
    children: [
      {
        path: 'admin',
        component: () => import('@/views/permission'),
        name: 'admin',
        meta: {
          id: 'permission1/admin',
          title: '管理员',
          icon: 'lock',
          // roles: [rules[0]] // you can set roles in root nav
        },
      },
    ],
  },
  {
    path: '/permission2',
    component: Layout,
    name: 'Permission2',
    hidden: false,
    alwaysShow: true, // will always show the root menu
    children: [
      {
        path: 'viewer',
        component: () => import('@/views/permission/viewer'),
        name: 'viewer',
        meta: {
          id: 'permission2/viewer',
          title: '浏览者',
          icon: 'dashboard',
          // roles: [rules[0], rules[3]] // you can set roles in root nav
        },
      },
    ],
    meta: {
      id: 'permission2',
      title: '浏览者',
      icon: 'dashboard',
      // roles: [rules[0], rules[3]] // you can set roles in root nav
    },
  },
  {
    path: '/permission3',
    component: Layout,
    hidden: false,
    redirect: '/permission3/index',
    alwaysShow: true, // will always show the root menu
    meta: {
      id: 'permission3',
      title: '编辑者',
      icon: 'edit',
      // roles: [rules[0], rules[1]] // you can set roles in root nav
    },
    children: [
      {
        name: 'editor',
        path: 'index',
        component: () => import('@/views/permission/editor'),
        meta: {
          id: 'permission3/editor',
          title: '编辑者',
          icon: 'edit',
          // roles: [rules[0], rules[1]] // you can set roles in root nav
        },
      },
      {
        name: 'admin',
        path: 'admin',
        component: () => import('@/views/permission/index'),
        meta: {
          id: 'permission3/admin',
          title: '管理员',
          icon: 'lock',
          // roles: [rules[0]] // you can set roles in root nav
        },
      },
    ],
  },
  // 路由模块
  { path: '*', redirect: '/404', hidden: true },
];

const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes,
  });

const router = createRouter();

// for debug
window.rotuer = router;

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher; // reset router
}

export default router;
